<template>
  <div class="view_t" ref="view_t">
    <div class="cont">
      <!-- <div class="cont_one" v-if="list.sub_tit">{{list.sub_tit}}</div>
      <div class="cont_two" v-if="list.sub_tit_con">{{list.sub_tit_con}}</div>
      <div class="cont_one" v-if="list.theme_tit">{{list.theme_tit}}</div> -->
      <div class="cont_two" v-if="list.tit_content">{{list.tit_content}}</div>
      <!-- <div class="one">{{list.tit_content}}</div> -->
      <!-- <div>{{list.tit_content}}</div>
      <div>{{list.tit_content}}</div>
      <div>{{list.tit_content}}</div>
      <div>{{list.tit_content}}</div> -->

    </div>
    <div class="page" v-for="(i,index) of arrey" :key="index">
      <div class="tit">{{i.special_tit}}</div>
      <div>{{i.special_con}}</div>
      <div class="page_slide" v-for="(y,index) of i.arr" :key="index">
        <div v-show="false">{{a=y.img_src.charAt(0)=="/"?"":"/"}}</div>
        <div><img :src="a+y.img_src" alt=""></div>

        <div class="slide_two">
          <!-- <div>{{y}}</div> -->
          <div>
            {{y.img_tit}}
          </div>
          <div>
            {{y.special_key}}
          </div>
          <div>
            {{y.search_key}}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data: () => ({
    list: "",
    arrey: []
  }),
  created() {
    let id = this.$route.params.id;
    this.$http
      .get("/api/menu/silderPage")
      .then(result => {
        // console.log(result.data);
        for (let i = 0; i < result.data.length; i++) {
          if (result.data[i].ID == id) {
            this.list = result.data[i];
          }
        }
      })
      .catch(err => {
        console.log(err);
      });
    this.$http

      .get("/api/menu/Page/" + id)
      .then(result => {
        // let aa = "abc";
        console.log(result);
        this.arrey = result.data;
        // console.log(this.arrey[0].arr);
        // console.log(aa.charAt(0) == "b" ? "" : "a");
      })
      .catch(err => {
        console.log(err);
      });
  }
};
</script>

<style lang="scss">
.view_t {
  width: 100%;
  height: 100%;
  overflow: hidden;
  box-sizing: border-box;
  padding: 0.5rem;
  font-size: 0.7rem;
  .cont {
    width: 100%;

    // padding: 0.5rem;
    .cont_one {
      color: #ff6767;
      padding: 0.5rem 0 0.5rem 0.5rem;
    }
  }
  .page {
    width: 100%;
    > div {
      padding-top: 1rem;
    }
    .tit {
      padding-left: 2rem;
    }
    .page_slide {
      display: flex;
      > div:nth-child(2) {
        width: 33%;
        > img {
          width: 100%;
        }
      }
      > div:nth-child(3) {
        flex-grow: 1;
        padding-left: 0.5rem;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
      }
    }
  }
}
</style>
